<template>
  <div class="cont">
    <div class="clearfix mar-bt">
      <!-- 开奖结果 -->
      <div class="result-letf">
        <div>
          重庆时时彩-<span class="beizhu">{{game}}</span> 
        </div>
        <div>
          开奖结果
          <div class="input-qs in-bl">
            <span :class="['iconfont','icon-arrow-left','anniu',{'active':inout}]" @click="resout"></span>
            <input type="number" v-model="gameResult" class="text" />
            <span :class="['iconfont','icon-arrow-right','anniu',{'active':inup}]" @click="resup"></span>
          </div>
         
          <div class="in-bl">
            <p v-for="(item,index) in jieguo" :key="index" class="ball in-bl">{{item}}</p>
            <span class="video-but">开奖视频</span>
          </div>
        </div>
      </div>
      <div class="result-right">
        <!-- 开奖期数 -->
        <div class="result-qs">
          当前期数
          <p>
            第
            <span>{{gameResultNow}}</span>
            期
          </p>
          今日已开
          <span>{{gameHas}}</span>
          期，剩余
          <span>
            {{gameRes}}
          </span>
          期
        </div>
        <div class="result-js">
          <span class="result-pd" v-if="true">（目前开放下注）</span>
          <span class="result-pd" v-else>（目前禁止下注）</span>
          <p>
            距离封盘:
            <span class="datenow">{{dateNow}}</span>
          </p>
        </div>
      </div>
    </div>
    
    <gametable></gametable>
  </div>
</template>

<script>
import gametable from '@/components/ssc/gametable'
export default {
  name: 'ssc',
  data () {
    return {
      jieguo:[1,2,3,3,2],
      inout:false,
      inup:false,
      gameResult:"0000000",
      gameResultNow:"000000055",
      gameHas:"00",
      dateNow:"00:00:00",
      gameRes:"00",
      gameType:true,
    }
  },
  components:{gametable},
  computed: {
    game(){
      return this.$store.state.gameType;
    }
  },
  methods:{
    resout(){
      this.gameResult>=1?this.gameResult--:"";
      this.autoPd()
    },
    resup(){
      this.gameResult<this.gameResultNow?this.gameResult++:"";
      this.autoPd()
    },
    autoPd(){
      this.inup=this.gameResult==this.gameResultNow?true:false;
      this.inout=this.gameResult==0?true:false;
    }
  }
}
</script>

<style lang="scss">
// @import "../../scss/iconfont";
  $col:#fe6263;
  $textCol:#666;
  .mar-bt{
    margin-bottom: 10px;
  }
  .in-bl{
    display: inline-block;
  }
  .cont{
    padding: 10px 5px;
    background-color: #fff;
    min-width: 973px;
    font-size: 14px;
  }
  .result-letf{
    float: left;
  }
  .result-right{
    text-align: right;
    float: right;
  }
  .beizhu{
    color: $col;
    font-weight: bold;
  }
  .result-qs{
    font-size: 14px;
    color: $textCol;
    p{
      color: $col;
      display: inline-block;
    }
    span{
      color: $col;
    }
  }
  .result-js{
    color: $textCol;
    .result-pd{
      color: #000;
      font-size: 14px;
      vertical-align: middle;
    }
    p{
      font-size: 24px;
      vertical-align: middle;
      display: inline-block;
      span{
        color: $col;
      }
      .datenow{
        text-align: center;
        display: inline-block;
        width: 100px;
      }
    }
  }
  .input-qs{
    height: 21px;
    text-align: center;
    display: inline-block;
    background: #ececec;
    border: 1 pxsolid #ececec;
    border-radius: 2px;
    font-size: 0;
    input{
      outline: none;
    }
    .anniu{
      user-select:none;
      border: 0;
      cursor: pointer;
      line-height: 20px;
      display: inline-block;
      width: 20px;
    }
    .active{
      color: rgb(209, 209, 209);
      cursor: default;
    }
    .text{
      color: $col;
      border: 0;
      font-weight: bold;
      width: 120px;
      height: 100%;
      text-align: center;
      background: #fff;
      border-top: 1px solid #ececec;
      border-bottom: 1px solid #ececec;
    }
  }
  input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0;
  }
  .ball{
    font-weight: bold;
    text-align: center;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: url("../../assets/img/ball_b.png") center no-repeat ;
  }
  .video-but{
    background-color: $col;
    border-radius: 3px;
    font-weight: normal;
    margin-left: 10px;
    padding: 2px 10px;
    cursor: pointer;
    color: #fff;
  }
</style>
